<template>
  <div>
    <div ref="charts" class="charts" style="width:100%;height:300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['config'],
  data() {
    return {
      charts: null,
    };
  },
  methods: {
    getmain2() {
      // 初始化图表
      let myChart = echarts.init(this.$refs.charts);

      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value",
          show: false
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          triggerOn: 'mousemove',
          formatter: (params) => {
            return params[0].axisValue + '<br/>金额: ' + params[0].data;
          },
          backgroundColor: 'red',
          textStyle: {
            color: 'white' // 设置字体颜色为白色
           }
        },
        series: [
    {
      itemStyle: {
        color: 'red'
      },
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
      symbol: 'circle', // 节点图形为圆形
      symbolSize: 10, // 节点图形大小
      emphasis: {
        // 在鼠标悬停时的样式设置
       /*  lineStyle: {
          width: 10 // 不显示虚线
        }, */
        itemStyle: {
          color: 'white', // 鼠标悬停时节点颜色
          borderColor: 'red', // 鼠标悬停时节点边框颜色
          borderWidth: 2, // 鼠标悬停时节点边框宽度
          shadowBlur: 10, // 鼠标悬停时节点阴影模糊度
          shadowColor: 'rgba(0, 0, 0, 0.5)' // 鼠标悬停时节点阴影颜色
        }
      }
    },
  ]
      };

      // 使用 setOption 方法设置图表配置
      myChart.setOption(option);

      // 将图表实例保存在数据中
      this.charts = myChart;
    }
  },
  mounted() {
    this.getmain2();
  }
};
</script>

<style lang="scss" scoped>
/* 可以添加一些样式，如需要的话 */
</style>
